<template>
  <div>
    <el-button type="primary" icon="el-icon-plus" :disabled="!category3Id" @click="addAttrValue">添加属性</el-button>
    <el-table v-loading="loading" :data="attrList" border style="margin-top:10px">
      <el-table-column type="index" label="序号" align="center" width="80" />
      <el-table-column prop="attrName" label="属性名称" width="180" />
      <el-table-column prop="address" label="属性值列表">
        <template v-slot="{row}">
          <el-tag v-for="attrValue in row.attrValueList" :key="attrValue.id" style="margin-right:10px">
            {{ attrValue.valueName }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" prop="address">
        <template v-slot="{row, $index}">
          <el-tooltip content="编辑属性" placement="top" style="margin-right:10px">
            <el-button type="warning" size="mini" icon="el-icon-edit" @click="editAttrValue(row)" />
          </el-tooltip>
          <el-popconfirm confirm-button-text="确定" cancel-button-text="取消" icon="el-icon-info" icon-color="red" title="您真的要删除此项属性值吗？" @onConfirm="deleteCurrentAttr(row,$index)">
            <el-tooltip slot="reference" content="删除属性" placement="top">
              <el-button type="danger" icon="el-icon-delete" size="small" />
            </el-tooltip>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { reqDeleteAttrInfo, reqGetAttrList } from '@/api/product/attr'
import { mapState } from 'vuex'
export default {
  name: 'AttrList',
  data() {
    return {
      loading: false,
      attrList: []
    }
  },
  computed: {
    ...mapState('category', ['category1Id', 'category2Id', 'category3Id'])
  },
  watch: {
    category3Id: {
      immediate: true,
      // handler() {
      //   this.getAttrList()
      // }
      handler: 'getAttrList'
    }
  },
  methods: {
    // 获取当前属性
    async getAttrList() {
      const { category1Id, category2Id, category3Id } = this
      if (!category3Id) {
        this.attrList = []
        return
      }
      this.loading = true
      const result = await reqGetAttrList({
        category1Id,
        category2Id,
        category3Id
      })
      if (result.code === 200) {
        this.loading = false
        this.attrList = result.data
      }
    },
    // 删除属性
    async deleteCurrentAttr(row, index) {
      const result = await reqDeleteAttrInfo(row.id)
      if (result.code === 200) {
        this.$message.success('删除属性成功')
        this.getAttrList()
      } else {
        this.$message.error('删除失败')
      }
    },
    // 编辑属性
    editAttrValue(row) {
      this.$emit('setAttr', row)
      this.$emit('setIsShowAttrList', false)
    },
    // 添加属性按钮
    addAttrValue() {
      this.$emit('setAttr', {
        attrName: '',
        attrValueList: []
      })
      this.$emit('setIsShowAttrList', false)
    }
  }
}
</script>

<style>
</style>
